import React, { Component } from 'react';
import { Routes, Route, Navigate } from 'react-router-dom'
/*
  Routes: 理解为 vue-router 中的 router-view,react 中的路由出口
  Route：是路由配置规则
  Navigate： 路由重定向用的组件
*/


import Home from './views/home/index'
import Kind from './views/kind/index'
import Cart from './views/cart/index'
import User from './views/user/index'
import Footer from './components/Footer'

// 路由懒加载
const NotFound = React.lazy(()=> import('./views/error/index'))
const Detail = React.lazy(()=> import('./views/detail/index'))
const Login = React.lazy(()=> import('./views/login/index'))


class App extends Component {
  render() {
    return (
      <div className='container'>

        {/* <div className='box'>
          <header className='header'>头部</header>
          <div className='content'>内容</div>
        </div> */}

        <Routes>
          {/* 如果需要进行路由的重定向，可以使用 Navigate 进行实现 */}
          <Route path='/' element={<Navigate to='/home' />} />
          <Route path='/home' element={<Home/>} />
          <Route path='/kind' element={<Kind/>} />
          <Route path='/cart' element={<Cart/>} />
          <Route path='/user' element={<User/>} />
          <Route path='/detail' element={<Detail/>} />
          <Route path='/login' element={<Login/>} />

          {/* 配置 404 页面 */}
          <Route path='*' element={<NotFound />} />
        </Routes>

        <Routes>
          <Route path='/home' element={<Footer />} />
          <Route path='/kind' element={<Footer />} />
          <Route path='/cart' element={<Footer />} />
          <Route path='/user' element={<Footer />} />

          <Route path='*' element={<></>} />
        </Routes>


      </div>
    );
  }
}

export default App;
